<!DOCTYPE html>
<html>

	<head>
		<meta charset='UTF-8'>
		<title></title>
		<script type='text/javascript' src='js/jquery-1.12.4.js'></script>
		<script type='text/javascript' src='js/test.js'></script>
		<style>
			* {
				margin: 0;
				outline: medium none;
				font-family: "微软雅黑";
				color: grey;
			}
			.d- {
				border: 1px solid darkslateblue;
				width: 900px;
				height: 470px;
				overflow: hidden;
				margin: 50px auto;
			}
			input {
				padding: 0 7px;
				background-color: #FFFFFF;
				border: 1px solid #95B8E7;
				height: 23px;
				outline: medium none;
				border-radius: 3px;
			}
			
			.d {
				border: 1px solid gray;
				width: 1040px;
				height: 503px;
				overflow: hidden;
				background-color: #ffffff;
			}
			
			.d1 {
				float: left;
				margin: 0px 0px;
				height: 100%;
				/*border-right: 1px solid gray;*/
				padding: 0px 30px;
				padding-top: 90px;
				background-color: #E2E0F5;
			}
			
			.d1>div:nth-child(1) {
				margin-left: 0px;
				font-size: large;
				font-weight: 700;
				color: white;
			}
			
			.d1>div:nth-child(2) {
				width-: 200px;
				margin: 10px 0px;
			}
			
			.d1>div:nth-child(3) {
				margin-top: 30px;
				font-size: 14px;
			}
			
			.d1 input {
				display: block;
				margin: 10px 0;
				width: 220px;
				height: 25px;
				background-color: #F3F2FA;
				box-shadow-:1px 2px 3px 1px #FAFAFA inset;
				border: 1px solid #E3E2E2;
				border-radius: 2px;
			}
			
			.d2 {
				float: left;
				margin: 60px 0px;
				padding: 30px 80px;
				background-color: #FAF9E2;
			}
			
			.xian {
				float: left;
				width: 1px;
				height: 500px;
				background-color: #ffffff;
			}
			
			.d2>div {
				margin: 5px;
				overflow: hidden;
			}
			
			.d21 input {
				width: 510px;
			}
			
			textarea {
				padding: 5 7px;
				width: 520px;
				height: 170px;
				border-radius: 5px;
				border: 1px solid #95B8E7;
			}
			
			.d22>div {
				float: left;
			}
			
			.d222,
			.d221 {
				margin-left: 30px;
			}
			
			.d222>div,
			.d221>div {
				float: left;
				background-color: #EEF6B8;
				margin: 5px 10px;
				padding: 5px;
				font-size: 15px;
				font-family: "微软雅黑";
				color: grey;
			}
			
			#tijiao {
				margin-top: 20px;
				height: 30px;
				width: 80px;
				background-color: brown;
				color: white;
				border: none;
			}
			
			.d222 {
				display: none;
			}
		</style>
		<script>
			$(function() {
				//init()
				$(".d22 :radio").change(function() {
					if($(".rad1").get(0).checked == true) {
						$(".d221").css("display", "block")
						$(".d222").css("display", "none")
						$(".d221>div").eq(0).click()
					} else {
						$(".d222").css("display", "block")
						$(".d221").css("display", "none")
						$(".d222>div").eq(0).click()
					}
				})
				checkdiv = $(".d221>div").eq(0)
				$(".d222>div").click(function() {
					checkdiv.css("background-color", "#EEF6B8")
					checkdiv = $(this).css("background-color", "#90EE90")
				})
				$(".d221>div").click(function() {
					checkdiv.css("background-color", "#EEF6B8")
					checkdiv = $(this).css("background-color", "#90EE90")
				})
				$(".d221>div").eq(0).click()
			})
		</script>
	</head>

	<body>
		<div class="d">
			<div class="d1">
				<div>操作人:</div>
				<div>
					<input type="text" placeholder="姓名" />
					<input type="text" placeholder="电话" />
					<input type="text" placeholder="QQ" />
				</div>
				<div>
					请简要描述错误出现的位置(或某个<br/>操作步骤)<br/> 我们会尽快的为您处理
				</div>
			</div>
			<div class="xian"></div>
			<div class="d2">
				<div class="d21">
					<input type="text" placeholder="标题 , 摘要" />
				</div>
				<div class="d22">
					<div>
						<input type="radio" class="rad1" checked="checked" value="bug" name="leixing" />bug
						<input type="radio" class="rad2" value="需求" name="leixing" />需求
					</div>
					<div class="d221">
						<div>轻微错误</div>
						<div>一般错误</div>
						<div>严重错误</div>
						<div>致命错误</div>
					</div>
					<div class="d222">
						<div>一般需求</div>
						<div>UI需求</div>
						<div>功能需求</div>
						<div>特殊需求</div>
					</div>
				</div>
				<div class="d23">
					<textarea id="text" placeholder="..."></textarea>
				</div>
				<input type="button" id="tijiao" value="提交错误" />
			</div>
		</div>
	</body>

</html>